<template>
  <div class="container" v-loading="isLoading">
    <el-card :key="isKey">
      <!-- <template #header>
        <el-form inline :model="searchForm" ref="searchForm">
          <el-form-item label="标题">
            <el-input v-model="searchForm.search" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchForm.status" placeholder="请选择状态">
              <el-option label="全部" value=""/>
              <el-option v-for="(oVal, oIdx) of status" :key="oIdx" v-bind="oVal"/>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间" prop="$createTime">
            <el-date-picker
              v-model="searchForm.$createTime"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="回复时间" prop="$headleTime">
            <el-date-picker
              v-model="searchForm.$headleTime"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </template> -->

      <el-table :data="tableData" border>
        <el-table-column prop="title" label="标题" show-overflow-tooltip />
        <el-table-column prop="content" label="详情" show-overflow-tooltip />
        <el-table-column prop="balance" label="心愿积分" align="center" />
        <el-table-column prop="tag" label="心愿分类" align="center" />
        <el-table-column prop="user" label="发布人微信昵称" />
        <el-table-column prop="user_phone" label="发布人手机号" />
        <el-table-column prop="headimgurl" label="微信头像">
          <template #default="{ row }">
            <el-image
              style="width: 100px; height: 100px"
              :src="row.user_avatar_url"
              :preview-src-list="[row.user_avatar_url]"
            />
          </template>
        </el-table-column>
        <el-table-column prop="status" label="是否在小程序端展示">
          <template slot-scope="{ row }">
            <span v-if="row.status==1">展示</span>
            <span class="red" v-else>不展示</span>
          </template>
        </el-table-column>


        <el-table-column prop="status" label="状态">
          <template slot-scope="{ row }">
            <span>{{ statusText[row.order_status] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间"
          width="180"
          align="center"
        />
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" @click="openEditDialog(row.id)"
              >查看</el-button
            >
            <el-button v-if="row.id" type="text" class="red" @click="acceptOrder(row.id)">通过</el-button>
            <el-button v-if="row.id" type="text" class="red" @click="deleteOrder(row.id)">不通过</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>

    <footer class="footer">
      <el-pagination
        background
        layout="total, sizes, pager, jumper"
        :current-page="searchForm.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="searchForm.per_page"
        :total="tableTotal"
        @size-change="changeSize"
        @current-change="changeCurrent"
      />
    </footer>

    <el-dialog
      title="查看详情"
      :visible.sync="showAddOrEdit"
      width="1200px"
      @closed="() => closeDialog"
    >
      <el-form
        :model="builingForm"
        ref="builingForm"
        label-width="7em"
      >
        <el-form-item prop="$id" hidden />
        <el-form-item class="span-2" label="发布人姓名" prop="user">
          <el-input readonly
            v-model="builingForm.user"
            placeholder="发布人姓名"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="发布人手机号" prop="user_phone">
          <el-input readonly
            v-model="builingForm.user_phone"
            placeholder="发布人手机号"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="微信头像" prop="user_avatar_url">
             <el-image
              style="width: 100px; height: 100px"
              :src="builingForm.user_avatar_url"
              :preview-src-list="[builingForm.user_avatar_url]"
            />
        </el-form-item>

        <el-divider></el-divider>

        <el-form-item class="span-2" label="创建时间" prop="create_time">
          <el-input readonly
            v-model="builingForm.create_time"
            placeholder="创建时间"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="截止时间" prop="create_time">
          <el-input readonly
            v-model="builingForm.end_time"
            placeholder="截止时间"
          ></el-input>
        </el-form-item>

         <el-form-item class="span-2" label="心愿类型" prop="tag">
          <el-input readonly
            v-model="builingForm.tag"
            placeholder="心愿类型"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="心愿积分" prop="balance">
          <el-input readonly
            v-model="builingForm.balance"
            placeholder="心愿积分"
          ></el-input>
        </el-form-item>

         <el-form-item label="标题" prop="title">
          <el-input readonly
            v-model="builingForm.title"
            placeholder="标题"
          ></el-input>
        </el-form-item>

        <el-form-item label="内容" prop="content">
          <el-input readonly
            v-model="builingForm.content"
            type="textarea"
            row="6"
            placeholder="请输入回复内容"
          ></el-input>
        </el-form-item>

        <el-form-item label="图片" v-if="builingForm.imgs" prop="imgs">
           <el-image v-for="(item,index) in builingForm.imgs" v-bind:key="index"
            style="width: 100px; height: 100px"
            :src="item"
            :preview-src-list="builingForm.imgs">
          </el-image>
        </el-form-item>


        <el-divider></el-divider>

        <!-- <el-form-item label="工单状态" prop="status">
          <el-select v-model="builingForm.status" disabled  placeholder="请选择状态">
            <el-option
              v-for="(oVal, oIdx) of status"
              :key="oIdx"
              v-bind="oVal"
            />
          </el-select>
        </el-form-item> -->

        <el-form-item class="span-2" v-if="builingForm.helper_user_avatar_url"  label="认领人信息">
          <div class="adminUserInfo">
            <el-avatar class="adminAvator" :src="builingForm.helper_user_avatar_url" />
            <div class="blue">{{ builingForm.helper_user_nick_name }}</div>
          </div>
        </el-form-item>

        <el-form-item class="span-2" v-if="builingForm.helper_phone" label="认领人手机号" prop="helper_phone">
          <el-input readonly
            v-model="builingForm.helper_phone"
            placeholder="发布人手机号"
          ></el-input>
        </el-form-item>
      </el-form>

      <template #footer v-if="builingForm.$status !== 2">
        <el-button type="primary" @click="closeDialog()"
          >关闭</el-button
        >
      </template>
    </el-dialog>

  </div>
</template>

<script>
import API from "@/api";
import { table, addOrEdit, status } from "@/utils/mixins";
import Preview from '@/components/Preview.vue';
export default {
  mixins: [table, addOrEdit, status],
   components: {
    Preview
  },
  data: () => ({
    isLoading:true,
    isCheckDetail:false,
    showAddOrEdit:false,//查看详情弹窗
    fullscreenLoading: false,//全局loading
    typeList: [],
    typeForm:[],
    tableData:[],
    searchForm:{
      page:1,
      per_page:10,
    },

    builingForm: {
      $id: "",
      user:"",//实名信息
      user_phone:'',//手机号
      user_avatar_url:"",//用户地址
      imgs:[],
      create_time:'',
      end_time:0,
      tag:'',//报修图片
      balance:"",
      title:'',
      content:'',
      status:0,//管理员回复
      helper_user_nick_name:'',//管理员回复图片
      helper_user_avatar_url:'',
      helper_phone:''
    },
    status: [
      { label: "待审核", value: 0 },
      { label: "已审核", value: 1 },
      { label: "已过期", value: 2 },
      { label: "不予通过", value: 3 },
    ],
    statusText:["未认领","已认领","已完成","已过期"]
  }),

  created() {
    this.getList()
  },

   methods: {
    // 获取列表
    getList(){
      this.isLoading=true
      API.getMicroWishList(this.searchForm)
      .then(({ data })=>{
        data.items.forEach(item=>{
          item.status=parseInt(item.status)  //审核 0:待审核 1:已审核 2:已过期 3:不予审核
          item.order_status=parseInt(item.order_status)  //认领 0未认领 1已认领(待完成) 2已认领(已完成) 3已过期 4已认领(未完成---恢复待认领状态)
        })
        this.tableData=data.items
        this.tableTotal=data.total
      })
      .catch()
      .finally(()=>{
        this.isLoading=false
      })
    },

    // 分页
    changeSize(val){
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.getList()
    },

    // 分页
    changeCurrent(val){
      this.searchForm.page = val
      this.getList()
    },

    // 审核通过
    acceptOrder(id){
      let _that=this
      this.$confirm(`是否通过该心愿？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
      .then(() => {
        API.checkMicroWishStatus(id,1)
        .then(({data}) => {
          this.$message.success("操作成功！");
        }).catch((err) => {
        }).finally(() =>{
          _that.getList()
        })
      })
      .catch(() => {
      });
    },

    // 删除
    deleteOrder(id){
      let _that=this
      this.$confirm(`是否隐藏该心愿？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
      .then(() => {
        API.checkMicroWishStatus(id,3)
        .then(({data}) => {
          this.$message.success("操作成功！");
        }).catch((err) => {
        }).finally(() =>{
          _that.getList()
        })
      })
      .catch(() => {
      });
    },

    // 查看工单详情详情
    openEditDialog(id){
      let _that=this
      let loadingInstance=this.$loading({ fullscreen: true })
      loadingInstance.close()
      API.getMicroWishDetail(id).then(({data})=>{
        _that.builingForm.$id=data.id
        _that.builingForm.user=data.user
        _that.builingForm.user_phone=data.user_phone
        _that.builingForm.user_avatar_url=data.user_avatar_url
        _that.builingForm.imgs=JSON.parse(data.imgs)
        _that.builingForm.create_time=data.create_time
        _that.builingForm.end_time=data.end_time
        _that.builingForm.tag=data.tag
        _that.builingForm.balance=data.balance
        _that.builingForm.title=data.title
        _that.builingForm.content=data.content
        _that.builingForm.status=parseInt(data.status)

        _that.builingForm.helper_user_nick_name=data.helper_user_nick_name
        _that.builingForm.helper_user_avatar_url=data.helper_user_avatar_url
        _that.builingForm.helper_phone=data.helper_phone
      })
      .catch()
      .finally(()=>{
        this.showAddOrEdit=true
        loadingInstance.close()
      })
    },

    // 关闭弹窗
    closeDialog(){
      this.restForm()
      this.showAddOrEdit=false
    },

    restForm(){
      let _that=this
      _that.builingForm.$id=""
      _that.builingForm.user=""
      _that.builingForm.user_phone=""
      _that.builingForm.user_avatar_url=""
      _that.builingForm.imgs=[]
      _that.builingForm.create_time=""
      _that.builingForm.end_time=""
      _that.builingForm.tag=""
      _that.builingForm.balance=""
      _that.builingForm.title=""
      _that.builingForm.content=""
      _that.builingForm.status=0

      _that.builingForm.helper_user_nick_name=""
      _that.builingForm.helper_user_avatar_url=""
      _that.builingForm.helper_phone=""
    },
  },

};
</script>

<style lang="scss" scoped>
  .adminUserInfo{
    display:flex;
    align-items: center;
    .adminAvator{
      width:40px;
      height:40px;
      border-radius: 50%;
      border: 1px solid rgba(0,0,0,0.4);
    }
    .blue{
      font-size:18px;
      margin-left: 12px;
      margin-right: 12px;
    }
  }
  ::v-deep {
    .el-input.is-disabled .el-input__inner ,
    .el-textarea.is-disabled .el-textarea__inner{
      font-size:16px;
      color:#333;
    }
    .el-dialog{
      margin-top:2vh !important;
    }
  }

</style>
